<template>
	<view class="cart-item-card">
		<tar-checkbox :value="value.checked" @input="updateChecked"></tar-checkbox>
		<image class="image" :src="value.titleImage" mode="scaleToFill"></image>
			<view class="info">
				<view class="title">{{value.title}}</view>
				<text class="desc">经典白， 经典套装</text>
				<view class="p-price">
					<view class="price"><text class="price-prefix">￥</text>{{value.price}}</view>
					<uni-number-box :value="value.quantity" @input="updateCount"></uni-number-box>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		name: "cart-item-card",
		data() {
			return {}
		},
		props: {
			value: {
				type: Object,
				required: true
			}
		},
		methods: {
			updateChecked(e){
				this.value.checked = e
				this.$emit('input',this.value)
			},
			updateCount(e){
				this.value.quantity = e
				this.$emit('input',this.value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cart-item-card {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 0 12px;
		.info{
			flex: 1;
			.p-price{
				display: flex;
				.price{
					color: #fa4126;
					flex: 1;
				}
			}
			.title{
				font-size: 28rpx;
				color: #333;
			}
			.desc{
				color: #999;
				background: #f5f5f5;
				font-size: 24rpx;
				padding: 0 .5em;
				border-radius: .3em;
			}
		}
		.image {
			width: 96px;
			height: 96px;
			border-radius: .5em;
		}
	}
</style>